<template>
	
<view>
	
  <uni-grid :showBorder="Boolean(data.border)" :column="data.col">
    <uni-grid-item
      v-for="(item, index) in data.list"
      :key="index"
      @tap="jump(item)"
    >
      <view class="grid-item-box ss-flex ss-flex-col ss-row-center ss-col-center">
        <view class="img-box">
          <view
            class="tag-box"
            v-if="item.badge.show"
            :style="[{ background: item.badge.bgColor, color: item.badge.color }]"
          >
            {{ item.badge.text }}
          </view>
          <image class="menu-image" :src="sheep.$url.cdn(item.src)"></image>
        </view>

        <view class="title-box ss-flex ss-flex-col ss-row-center ss-col-center">
          <view class="grid-text" :style="[{ color: item.title.color }]">
            {{ item.title.text }}
          </view>
          <view class="grid-tip" :style="[{ color: item.tip.color }]">
            {{ item.tip.text }}
          </view>
        </view>
      </view>
    </uni-grid-item>
	
	<uni-grid-item
	v-if="userInfo.is_shop"
	  @tap="sheep.$router.go('/pages/user/shop/list')"
	>
	  <view class="grid-item-box ss-flex ss-flex-col ss-row-center ss-col-center">
	    <view class="img-box">
	      <image class="menu-image" src="/static/shop.png"></image>
	    </view>
	
	    <view class="title-box ss-flex ss-flex-col ss-row-center ss-col-center">
	      <view class="grid-text" style="color: rgb(51, 51, 51);">
	       我的店铺
	      </view>
	    </view>
	  </view>
	</uni-grid-item>
	
  </uni-grid>
  
  <su-popup 
  :show="showDownload" 
  round="10" 
  :showClose="true" 
  @close="closeModal"
  type="center"
  >
	  <view class="modal-content">
		  <view class="modal-title">下载app</view>
		  <image src="/static/download.png" class="modal-image"></image>
		  <view class="modal-btn" @click="saveImage()">长按图片保存</view>
	  </view>
  </su-popup>
  
</view>
  
</template>

<script setup>
  import sheep from '@/sheep';
  import { computed, reactive, ref } from 'vue';
  
  const userInfo = computed(() => sheep.$store('user').userInfo);
  console.log("userInfo", userInfo.value);
  
  const props = defineProps({
    data: {
      type: Object,
      default() {},
    },
  });
  
  const showDownload = ref(null);
  
  function jump(item){
	  if(item.title.text == '下载app'){
		   //直接下载app
		   download();
		   
		   //showDownload.value = true;
	  }else{
		  sheep.$router.go(item.url)
	  }
  }
  
  function download(){
	    let url = 'http://firtest.duoduoduo.work/jq74cd';
	  
	   //#ifdef H5
	   window.location.href = url;
	   //#endif
	   
	   //#ifdef APP-PLUS
	   plus.runtime.openURL(url);
	   //#endif
  }
  
  function closeModal(){
	  showDownload.value = false;
  }
  
  function saveImage(){
	let qrcode_img = '/static/download.png';
	
  	// #ifdef H5
	sheep.$helper.toast('长按图片保存');
  	return false;
  	// #endif
  	
  	uni.saveImageToPhotosAlbum({
  		filePath: qrcode_img,
  		success: (res) => {
  			uni.showToast({
  			title: "已存至系统相册",
  			icon: "success",
  			  });
  		},
  		fail: (res) => {
  		  uni.showToast({
  			title: "保存失败",
  			icon: "error",
  		  });
  		},
  	});
  }
  
</script>

<style lang="scss" scoped>
  .menu-image {
    width: 24px;
    height: 24px;
  }
  .grid-item-box {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    .img-box {
      position: relative;
      .tag-box {
        position: absolute;
        z-index: 2;
        top: 0;
        right: 0;
        font-size: 2em;
        line-height: 1;
        padding: 0.4em 0.6em 0.3em;
        transform: scale(0.4) translateX(0.5em) translatey(-0.6em);
        transform-origin: 100% 0;
        border-radius: 200rpx;
        white-space: nowrap;
      }
    }

    .title-box {
      .grid-tip {
        font-size: 24rpx;
        white-space: nowrap;
        text-align: center;
      }
    }
  }
  
  .modal-content{
	  width: 560rpx;
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  padding: 40rpx;
	  
	  .modal-title{
	  	font-size: 32rrpx;
	  	font-family: PingFang SC;
	  	font-weight: 700;
	  	color: #292929;
	  }
	  
	  .modal-image{
	  	width: 450rpx;
		height: 450rpx;
	  }
	  
	  .modal-btn{
	  	width: 165px;
	  	height: 38px;
	  	line-height: 38px;
	  	background: #ff6100;
	  	border-radius: 19px;
	  	font-size: 15px;
	  	font-weight: 500;
	  	color: #ffffff;
	  	display: flex;
	  	align-items: center;
	  	justify-content: center;
	  	margin-top: 20rpx;
	  }
  }
  
  
</style>
